<template>
	<Form label-position="top">
        <FormItem label="间距设置">
        	<div class="ui-slider-group">
        		<div class="label">顶部外边距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.margin"></Slider>
        		</div>
        	</div>
        	<div class="ui-slider-group">
        		<div class="label">上下间距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.paddingy"></Slider>
        		</div>
        	</div>
        	<div class="ui-slider-group">
        		<div class="label">左右间距</div>
        		<div class="box">
        			<Slider :max="50" v-model="value.paddingx"></Slider>
        		</div>
        	</div>
        </FormItem>
        <FormItem label="线条样式">
            <RadioGroup v-model="value.style">
		        <Radio label="solid">实线</Radio>
		        <Radio label="dashed">虚线</Radio>
		        <Radio label="dotted">点线</Radio>
		    </RadioGroup>
		    <div class="ui-slider-group">
        		<div class="label">线条粗度</div>
        		<div class="box">
        			<Slider :min="1" :max="20" v-model="value.height"></Slider>
        		</div>
        	</div>
        </FormItem>
        <FormItem label="线条颜色">
            <ColorPicker v-model="value.color" placement="bottom-start"></ColorPicker>
            <span style="margin-left: 10px; color: #999;">请选择线条颜色</span>
        </FormItem>
   	</Form>
</template>

<script>
export default {
	name: 'sublineConfig',
	props: {
		value: Object
	}
}
</script>

<style>
</style>